<template>
  <div>
    <!--条件查询-->
    <el-select v-model="roleId" placeholder="请选择地点">
      <el-option label="请选择" value=""></el-option>
      <el-option
        v-for="item in tableDataRoleList"
        :key="item.id"
        :label="item.description"
        :value="item.id"
      />
    </el-select>
    <el-button type="info" size="small" @click="searchUserByRoleId">
      查询
    </el-button>
    <el-button type="info" size="small" @click="toAddUserDialog">
      添加
    </el-button>
    <!--列表-->
    <el-table :data="tableDataUserList.records">
      <el-table-column prop="nickname" label="名称" />
      <el-table-column prop="phone" label="电话" />
      <el-table-column prop="email" label="邮箱" />
      <el-table-column prop="description" label="角色" />
      <el-table-column prop="telephone" label="座机" />
      <el-table-column prop="sex" label="性别">
        <template #default="scope">
          {{ scope.row.sex === 1 ? '男' : '女' }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          {{ scope.row.status === 1 ? '正常' : '禁用' }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            type="primary"
            size="small"
            @click="alertTheDisable(scope.row)"
          >
            {{ scope.row.status === 1 ? '禁用' : '解除' }}
          </el-button>
          <el-button
            type="primary"
            size="small"
            @click="alertTheMessage(scope.row)"
          >
            修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <div>
      <el-pagination
        :current-page="tableDataUserList.currents"
        :page-size="tableDataUserList.size"
        :page-sizes="[5, 10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableDataUserList.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!--新增-->
    <el-dialog
      v-model="dialogVisible"
      title="添加"
      width="500px"
      :before-close="handleClose"
    >
      <span>
        <el-form :model="userValue">
          <el-form-item>
            <el-input
              :prefix-icon="Search"
              placeholder="昵称"
              v-model="userValue.nickname"
            />
          </el-form-item>
          <el-form-item>
            <el-radio-group v-model="userValue.sex">
              <el-radio :prefix-icon="Female" :value="0" :label="0">
                女
              </el-radio>
              <el-radio :prefix-icon="Male" :value="1" :label="1">男</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-input
              :prefix-icon="User"
              placeholder="账号"
              v-model="userValue.username"
            />
          </el-form-item>
          <el-form-item>
            <el-input
              :prefix-icon="Lock"
              placeholder="密码"
              type="password"
              v-model="userValue.password"
            />
          </el-form-item>
          <el-form-item>
            <el-input
              :prefix-icon="Cellphone"
              placeholder="座机号（可为空）"
              v-model="userValue.telephone"
            />
          </el-form-item>
          <el-form-item>
            <el-input
              :prefix-icon="PhoneFilled"
              placeholder="手机号"
              v-model="userValue.phone"
            />
          </el-form-item>
          <el-form-item>
            <el-input
              :prefix-icon="Message"
              placeholder="邮箱"
              v-model="userValue.email"
            />
          </el-form-item>
          <el-form-item>
            <el-select v-model="userValue.roleId" placeholder="请选择角色">
              <el-option label="请选择" value=""></el-option>
              <el-option
                v-for="item in tableDataRoleList"
                :key="item.id"
                :label="item.description"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addUserMessage">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { addUser, allUsers, disable, roleList } from '@/api/userManager'
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Cellphone,
  Female,
  Male,
  Message,
  PhoneFilled,
  Search,
  User,
  Lock,
} from '@element-plus/icons-vue'

const tableDataUserList = ref([])
const tableDataRoleList = ref([])
const dialogVisible = ref(false)
const pageValue = ref({
  offset: '0',
  pageSize: '5',
})
const userValue = ref({
  username: '',
  password: '',
  nickname: '',
  phone: '',
  telephone: '',
  email: '',
  sex: '',
  birthday: '',
  roleId: '',
})

const roleId = ref('')

//查询用户列表
function findAllUser() {
  allUsers(pageValue.value.offset, pageValue.value.pageSize, roleId.value).then(
    res => {
      if (res.code === 200) {
        tableDataUserList.value = res.data
      }
    }
  )
}

// 分页(每页条目数)
function handleSizeChange(val) {
  console.log(`${val} items per page`)
  pageValue.value.pageSize = val
  findAllUser()
}

// 分页(当前页数)
function handleCurrentChange(val) {
  console.log(`current page: ${val}`)
  pageValue.value.offset = val
  findAllUser()
}

//查询用户列表
function findAllRole() {
  roleList().then(res => {
    if (res.code === 200) {
      tableDataRoleList.value = res.data
    }
  })
}

//查询某个角色用户
function searchUserByRoleId() {
  console.log(roleId.value)
  findAllUser()
}

//用户禁用/激活
function alertTheDisable(data) {
  disable(data.id).then(res => {
    if (res.code === 200) {
      ElMessage.success('修改成功')
      findAllUser()
    } else {
      ElMessage.error('修改失败')
    }
  })
}

//修改用户信息
function alertTheMessage(data) {
  dialogVisible.value = true
  userValue.value = data
  console.log(data)
}

//dialog空白处点击提示
const handleClose = async done => {
  ElMessageBox.confirm('确定要关闭吗?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}

//打开添加框
const toAddUserDialog = () => {
  userValue.value = {}
  dialogVisible.value = true
}

//添加
const addUserMessage = () => {
  console.log(userValue.value)
  addUser(userValue.value).then(res => {
    if (res.code === 200) {
      findAllUser()
      userValue.value = {}
      dialogVisible.value = false
      ElMessage.success('操作成功')
    } else {
      ElMessage.error('操作失败')
    }
  })
}

findAllUser()
findAllRole()
</script>

<style scoped></style>
